<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Add Keyword</title>
    <!-- 引入 Element UI 的 CSS 文件 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
</head>
<body>
<div id="app">
    <el-container>
        <el-main>
            <el-card>
                <div slot="header">
                    <h1>添加公众号</h1>
                </div>
                <el-form label-position="top" ref="form" >
                    <el-form-item label="公众号名称">
                        <el-input v-model="name" placeholder="Enter Keyword"></el-input>
                    </el-form-item>
                    <el-form-item label="webhook通知链接">
                        <el-input v-model="webHookUrl" placeholder="Enter Hook URL"></el-input>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="addKeyword">Add</el-button>
                    </el-form-item>
                </el-form>
            </el-card>
        </el-main>
        <el-main style="width: 50%;">
            <el-card>
                <div slot="header">
                    <h1>表格</h1>
                </div>
                <el-table
                        :data="tableData"
                        style="width: 100%">
                    <el-table-column
                            prop="id"
                            label="id"
                            width="180">
                    </el-table-column>
                    <el-table-column
                            prop="name"
                            label="姓名"
                            width="180">
                    </el-table-column>
                    <el-table-column
                            prop="webHookUrl"
                            label="webhook通知链接">
                    </el-table-column>
                    <el-table-column
                            label="操作"
                            width="180">
                        <template slot-scope="scope">
                            <el-button
                                    size="mini"
                                    type="primary"
                                    @click="editKeyword(scope.row)">编辑</el-button>
                            <el-button
                                    size="mini"
                                    type="danger"
                                    @click="deleteKeyword(scope.row.id)">删除</el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </el-card>
        </el-main>
    </el-container>
</div>

<!-- 引入 Vue.js -->
<script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
<!-- 引入 Element UI 的 JavaScript 文件 -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<!-- 引入 axios -->
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>

<script>
    new Vue({
        el: '#app',
        data() {
            return {
                name: '',
                webHookUrl: '',
                tableData:[]
            };
        },
        mounted() {
            this.getTableData()
        },
        methods: {
            addKeyword() {
                axios.post('/k', {
                    name: this.name,
                    webHookUrl: this.webHookUrl
                })
                    .then(response => {
                        console.log(response.data);
                        if (response.data.code === 2000) {
                            this.$message({
                                message: '添加成功',
                                type: 'success'
                            });
                            this.getTableData()
                        } else {
                            this.$message({
                                message: response.data.msg,
                                type: 'error'
                            });
                        }
                        // 在这里处理成功响应，例如显示成功消息等
                    })
                    .catch(error => {
                        console.error(error);
                        // 在这里处理错误，例如显示错误消息等
                    });
            },
            getTableData() {
                axios.get('/k')
                    .then(response => {
                        console.log(response.data);
                        this.tableData = response.data.data;
                    })
                    .catch(error => {
                        console.error(error); // 在这里处理失败响应，例如显示错误消息等
                    });
            },
            editKeyword(row){
                console.log(row)
            },
            deleteKeyword(id){

                axios.delete(`/k${id}`,)
                    .then(response => {
                        this.$message.success('删除成功')
                        this.getTableData()
                    })
                    .catch(error => {
                        console.error(error); // 在这里处理失败响应，例如显示错误消息等
                    });
            }
        }
    });
</script>
</body>
</html>
